<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <title>Home Page</title>
    <link href="./image/atreez_icon.png" rel="icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1271093_onqxase3le.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>
<script>
    (function(doc, win) {
        var docEl = doc.documentElement,
                isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                dpr = 1,
                scale = 1 / dpr,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = dpr;
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function() {
            var width = docEl.clientWidth;
            if (width / dpr > 750) {
                width = 750 * dpr;
            }
            // 乘以100，px : rem = 100 : 1
            docEl.style.fontSize = 100 * (width / 750) + 'px';

            // 375px ,rem = 50，1
        };
        recalc()
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    })(document, window);
</script>
<body>
<div class="container-fluid header">
    <div id="logo">
        <a href="index.html">
            <img src="./image/logo-270x44.png" alt="Komembers Shop" title="Komembers Shop" class="logo-2x">
        </a>
    </div>
    <ul class="list-inline nav-tabs">
        <li class="pull-left category"><i class="iconfont iconbtn-mweb-category"></i></li>
        <li class="pull-right"><i class="iconfont iconbtn-mweb-cart"></i></li>
        <li class="clearfix"></li>
    </ul>
</div>
<div class="dialog-vertical" data-spm="dialog">
    <div class="dialog-wrapper"></div>
    <div class="dialog dialog-popup">
        <div class="dialog-content">
            <div class="dialog-header">
                <div class="mlr-15 text-center line-center">
                    <ul class="list-inline nav-tabs">
                        <li class="pull-left"><i class="iconfont iconbtn-mweb-back"></i></li>
                        <li class="pull-right"><i class="iconfont iconbtn-mweb-search"></i></li>
                        <li class="clearfix"></li>
                    </ul>
                    <div class="dialog-avatar"><i class="iconfont iconbtn-mweb-logindefault"></i></div>
                    <div class="dialog-login ml-10 btn-login">Sign in/Sign up</div>
                    <nav id="bottom-tab-menu">
                        <div class="menu-item">
                            <a class="active" href="">
                                <i class="iconfont iconbtn-mweb-wishlist"></i>
                                <div class="name">Wishlist</div>
                            </a>
                        </div>
                        <div class="menu-item">
                            <a class="active" href="">
                                <i class="iconfont iconbtn-mweb-freeshipping"></i>
                                <div class="name">Free Shipping</div>
                            </a>
                        </div>
                        <div class="menu-item">
                            <a class="active" href="">
                                <i class="iconfont iconbtn-mweb-dailydeals"></i>
                                <div class="name">Daily Deals</div>
                            </a>
                        </div>
                    </nav>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="border"></div>
            <div class="dialog-category-list dialog-central mlr-15">
                <ul class="catetory-list">
                    <li>Home</li>
                    <li>Skin Care</li>
                    <li>Sun Care</li>
                    <li>Man’s</li>
                    <li>Body and Hair</li>
                    <li>Lip Make up</li>
                    <li>Serum</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    $('.category').click(function () {
        $('.dialog-vertical').addClass('dialog-show')
        $(document).find('body').addClass('overflowHide')

    })

    $('.dialog-wrapper').click(function () {
        $('.dialog-vertical').removeClass('dialog-show')
        $(document).find('body').removeClass('overflowHide')

    })
</script>